<html>
<head>
  <title>Console TTS Engine</title>
  <style>
    body {
      font-family: arial, helvetica, sans-serif;
    }
    table {
      text-align: center;
      padding: 10px;
    }
    #text {
      text-align: left;
      padding: 4px;
      border: 1px solid #aaa;
      width: 99%;
      min-height: 100px;
      overflow: auto;
    }
  </style>
  <script type="text/javascript">
    function clearText() {
      document.getElementById("text").innerHTML = "";
    }
  </script>
</head>
<body>
  <table>
    <tr>
      <th>Voice Name</th>
      <th>Language</th>
      <th>Rate</th>
      <th>Pitch</th>
      <th>Volume</th>
    </tr>
    <tr>
      <td id="voiceName"></td>
      <td id="lang"></td>
      <td id="rate"></td>
      <td id="pitch"></td>
      <td id="volume"></td>
    </tr>
  </table>
  <button onclick="clearText()">Clear</button>
  <p id="text"></p>
</body>
</html>
